<template>
  <div>
    <div class="searchWrap">
      <van-search
        v-model.trim="keywords"
        shape="round"
        placeholder="请输入搜索关键词"
        :class="{ active: highlight }"
        left-icon=""
        @focus="isFocusHighlight"
        @blur="isBlurHighlight"
        @search="getSearchData"
        @input="onInput"
      />
    </div>
    <div style="margin-top: 6px;">
      <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
        <van-list
          v-model="isLoading"
          :finished="finished"
          :finished-text="listData.length > 0 ? '没有更多了' : ''"
          :immediate-check="false"
          @load="onLoad"
        >
          <list-item
            v-for="(item, index) in listData"
            :key="index"
            :item="item"
            @skip="toDetail()"
          />
        </van-list>
        <!-- 暂无数据 -->
        <div v-if="listData.length === 0 && finished">
          没有数据
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { debounce } from 'lodash';
import ListItem from './ListItem';
export default {
  name: 'search',
  components: {
    ListItem
  },
  data() {
    return {
      isFirstEnter: false, // 是否是首次加载
      keywords: '', // 关键词
      highlight: false, // 是否高亮
      listData: [], // 套餐列表
      pageIndex: 1,
      pageSize: 10,
      finished: false,
      isRefresh: false,
      isLoading: false,
      isRequesting: false
    };
  },
  created() {
    this.isFirstEnter = true;
  },
  activated() {
    console.log(
      'activated===',
      this.isFirstEnter,
      this.$route.meta.isNeedRefresh
    );
    if (this.isFirstEnter || this.$route.meta.isNeedRefresh) {
      this.initData();
      this.queryList();
    }
    this.isFirstEnter = false;
    this.$route.meta.isNeedRefresh = false;
  },
  beforeRouteEnter(to, from, next) {
    to.meta.isNeedRefresh = from.path === '/index';
    next();
  },
  methods: {
    initData() {
      this.keywords = '';
      this.highlight = false;
      this.listData = [];
      this.pageIndex = 1;
      this.pageSize = 10;
      this.finished = false;
    },
    toDetail() {
      // todo
    },
    // 判断搜索框是否高亮
    isFocusHighlight() {
      this.highlight = true;
    },
    isBlurHighlight() {
      this.highlight = !!this.keywords;
    },
    getSearchData() {
      this.pageIndex = 1;
      this.queryList();
    },
    onInput: debounce(function() {
      this.pageIndex = 1;
      this.queryList();
    }, 500),
    onRefresh() {
      console.log('onRefresh===');
      this.pageIndex = 1;
      this.queryList();
    },
    onLoad() {
      console.log('onLoad===');
      if (this.pageIndex === 1 || this.isRequesting) return;
      this.queryList();
    },
    queryList() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      });
      this.isRequesting = true;
      queryList({
        name: this.keywords,
        pageIndex: 1,
        pageSize: 10
      })
        .then(res => {
          if (res.code === 200) {
            const result = res?.data?.data || [];
            if (this.pageIndex === 1) {
              this.listData = result;
            } else {
              this.listData = this.listData.concat(result);
            }
            this.finished = result.length < this.pageSize;
            if (!this.finished) {
              this.pageIndex += 1;
            }
          } else {
            this.finished = true;
          }
        })
        .catch(() => {
          this.finished = true;
        })
        .finally(() => {
          this.isRequesting = false;
          this.isRefresh = false;
          this.isLoading = false;
          this.$toast.clear();
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import 'index';
</style>
